import React from 'react';
import ReactECharts from 'echarts-for-react';
var myGraphData = [
    { "parentNode":"张三", "childNodes":["小明", "小华", "小杰", "小婷","小妍","小飞"]},
    { "parentNode":"小明", "childNodes":[ "小王", "小赵", "小钱" ] },
    { "parentNode":"小华", "childNodes":[ "小孙", "小李", "小周" ] },
    { "parentNode":"小杰", "childNodes":[ "小吴", "小郑" ] },
    { "parentNode":"小婷", "childNodes":[ "小谢", "小潘" ] },
    { "parentNode":"小妍", "childNodes":[ "小苏", "小陈" ] },
    { "parentNode":"小飞", "childNodes":[ "小郭", "小彭" ] }
    
];
    
function setNodeData(arr, m, n ,listdata) {
var size = 33;
for(var i=0; i<arr.length; i++){
    listdata.push({
        id : m++,
        category: n,
        name: arr[i],
        symbolSize: size,
        draggable: "true"
    });
}
}
    
function setLinkData(sourceList, m, links) {
for(var i=0; i<sourceList.length; i++){
    links.push({
        "source": sourceList[i],
        "target": m,
        lineStyle: {
            normal: {
                color: 'source',
            }
        }
    })
}
}    

var listdata = [];
var linksdata = [];     

var nodeData = myGraphData;
var m = 0;
var source = [];
for(var i=1; i < nodeData.length; i++){
var node = nodeData[i].parentNode;
var tx = [node];
setNodeData( tx, m, 1, listdata);
source.push(m);

var Data = nodeData[i].childNodes;
setNodeData( Data, m+1, 2, listdata);

var sourceList = [];
for(var n = m+1; n < m + Data.length + 1; n++){
    sourceList.push(n);
}
setLinkData( sourceList, m, linksdata);
m = m + Data.length + 1;
}
    
var tx7 = [];
tx7.push(nodeData[0].parentNode);
setNodeData(tx7, m, 0, listdata);
setLinkData(source, m, linksdata);

var option = {
title: {
    text: "确诊人员关系图",
    top: "top",
    left: "left",
    textStyle: {
        color: '#292421'
    }
},
tooltip: {
    formatter: '{b}'
},
backgroundColor: '#FFFFFF',
legend: {
    show : true,
    data : [ {
        name : '确诊人',             
        icon : 'rect'
    },
    {
        name : '密接人员',             
        icon : 'roundRect'
    }, {
        name : '次密接人员',              
        icon : 'circle'
    } ],
    textStyle: {
        color: '#292421'
    },
    icon: 'circle',
    type: 'scroll',
    orient: 'horizontal',
    left: 10,
    top: 20,
    bottom: 20,
    itemWidth: 10,
    itemHeight: 10
},
animationDuration: 0,
animationEasingUpdate: 'quinticInOut',
series: [{
    name: '知识图谱',
    type: 'graph',
    layout: 'force',
    force: {
        repulsion: 300,
        gravity: 0.1,
        edgeLength: 15,
        layoutAnimation: true,
    },
    data: listdata,
    links: linksdata,
    categories:[ 
        {
            name : '确诊人',
            symbol : 'rect',
            label : {
            }
        }, {
            name : '密接人员',
            symbol : 'rect'
        }, {
            name : '次密接人员',
            symbol : 'roundRect'
        }],
    roam: true,
    label: {
        normal: {
            show: true,
            position: 'bottom',
            formatter: '{b}',
            fontSize: 10,
            fontStyle: '600',
        }
    },
    lineStyle: {
        normal: {
            opacity: 0.9,
            width: 1.5,
            curveness: 0
        }
    }
}]
};
function Tu3(props) {
    return (
        <div className='tu3' style={{width:"100%",height:"100%"}}>
             <ReactECharts option={option} className="charts" />
        </div>
    );
}

export default Tu3;